<script setup>
import {ref,onMounted} from 'vue'

//请假信息
const leaveInfo = ref({})

//获取本地
onMounted(()=>{
  const leaveRecords = uni.getStorageSync('leaveRecords') || []
  const pendingRecord =  leaveRecords.find(record=>record.status === 'pending')

  if (pendingRecord){
    leaveInfo.value = pendingRecord
    if(!leaveInfo.value.applyTime){
      leaveInfo.value.applyTime = new Date().toLocaleString()
    }
  }else{
    //没有审批中的
    uni.showToast({
      title:'没找到审批',
      icon:'none'
    })
    setTimeout(()=> {
      uni.navigateBack()
    },1500)
  }
})
// 撤销请假申请
const handleCancel = () => {
  // 从本地存储获取请假记录
  const leaveRecords = uni.getStorageSync('leaveRecords') || [];

  // 找到对应的请假记录并移除
  const updatedRecords = leaveRecords.filter(record => record.id !== leaveInfo.value.id);

  // 更新本地存储
  uni.setStorageSync('leaveRecords', updatedRecords);

  // 更新我的请假计数
  const myLeaveCount = updatedRecords.filter(record => record.status === 'pending' || record.status === 'approved' || record.status === 'rejected' || record.status === 'waitingCancel').length;
  uni.setStorageSync('myLeaveCount', myLeaveCount);

  // 更新待销假计数
  const waitingCancelCount = updatedRecords.filter(record => record.status === 'waitingCancel').length;
  uni.setStorageSync('waitingCancelCount', waitingCancelCount);

  // 显示撤销成功提示
  uni.showToast({
    title: '已撤销申请',
    icon: 'success'
  });

  // 延迟返回上一页
  setTimeout(() => {
    uni.navigateBack();
  }, 1500);
};
</script>

<template>
<view class="container">
<!--  审批信息-->
  <view class="approval_card">
    <view class="info_section">
      <text class="section_title">请假信息</text>

      <view class="info_item">
        <text class="info_label">请假类型</text>
        <text class="info_value">{{leaveInfo.type}}</text>
      </view>

      <view class="info_item">
        <text class="info_label">假期开始时间</text>
        <text class="info_value">{{leaveInfo.startTime}}</text>
      </view>

      <view class="info_item">
        <text class="info_label">假期结束时间</text>
        <text class="info_value">{{leaveInfo.endTime}}</text>
      </view>

      <view class="info_item">
        <text class="info_label">请假时长</text>
        <text class="info_value">{{leaveInfo.leaveDuration}}</text>
      </view>

      <view class="info_item">
        <text class="info_label">是否出校</text>
        <text class="info_value">{{leaveInfo.leaveCampus}}</text>
      </view>

      <view class="info_item" v-if="leaveInfo.destination">
        <text class="info_label">目的地</text>
        <text class="info_value">{{leaveInfo.destination}}</text>
      </view>

      <view class="info_item" v-if="leaveInfo.detailAddress">
        <text class="info_label">详细地址</text>
        <text class="info_value">{{leaveInfo.detailAddress}}</text>
      </view>

      <view class="info_item">
        <text class="info_label">紧急联系电话</text>
        <text class="info_value">{{leaveInfo.emergencyPhone}}</text>
      </view>

      <view class="info_item">
        <text class="info_label">请假理由</text>
        <text class="info_value">{{leaveInfo.leaveReason}}</text>
      </view>

      <view class="info_item" v-if="leaveInfo.attachmentPath">
        <text class="info_label">请假时长</text>
        <view class="attachment_container">
          <image class="attachment_icon" src="/static/image/link.png" mode="aspectFit"></image>
          <text class="info_value attachment_link">{{ leaveInfo.attachmentPath.split('/').pop() }}</text>
        </view>
      </view>
    </view>

<!--    学生信息-->
    <view class="info_section">
      <text class="section_title">学生信息</text>


      <view class="info_item">
        <text class="info_label">学生姓名</text>
        <view class="approver_container">
          <image class="approver_avatar" src="/static/image/jiangyucheng.png" mode="aspectFit"></image>
          <text class="info_value">姜雨成</text>
        </view>
      </view>

      <view class="info_item">
        <text class="info_label">学生学号</text>
        <text class="info_value">2413042418</text>
      </view>

      <view class="info_item">
        <text class="info_label">申请时间</text>
        <text class="info_value">{{leaveInfo.applyTime || new Date().toLocaleString()}}</text>
      </view>
    </view>

<!--    审批信息-->
    <view class="info_section">
      <text class="section_title">审批信息</text>
      <view class="info_item">
        <text class="info_label">审批状态</text>
        <text class="info_value status_pending">审批中...</text>
      </view>
      <view class="info_item">
        <text class="info_label">审批人姓名</text>
        <view class="approver_container">
          <image class="approver_avatar" src="/static/image/teacher.png" mode="aspectFit"></image>
          <text class="info_value">李晓飞</text>
        </view>
      </view>
      <view class="info_item">
        <text class="info_label">审批人工号</text>
        <text class="info_value">29475378</text>
      </view>
      <view class="info_item">
        <text class="info_label">审批结果</text>
        <text class="info_value">--</text>
      </view>
      <view class="info_item">
        <text class="info_label">审批人姓名</text>
        <text class="info_value">李晓飞</text>
      </view>
      <view class="info_item">
        <text class="info_label">审批意见</text>
        <text class="info_value">--</text>
      </view>
      <view class="info_item">
        <text class="info_label">审批时间</text>
        <text class="info_value">--</text>
      </view>
    </view>
  </view>
  <!--  撤销申请-->
  <view class="cancel_btn" @click="handleCancel">
    <text class="cancel_btn_text">撤销申请</text>
  </view>
</view>
</template>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
}

.top_bar {
  height: 100rpx;
  background-color: #2f5496;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.top_title {
  color: #fff;
  font-size: 36rpx;
  font-weight: 500;
}

.approval_card {
  background-color: #fff;
  margin: 120rpx 30rpx 30rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.info_section {
  margin-bottom: 30rpx;
}

.info_section:last-child {
  margin-bottom: 0;
}

.section_title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}

.info_item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info_item:last-child {
  border-bottom: none;
}

.info_label {
  font-size: 28rpx;
  color: #666;
  min-width: 160rpx;
}

.info_value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  text-align: right;
  word-break: break-all;
}

.status_pending {
  color: #faad14;
}

.attachment_link {
  color: #2f5496;
  text-decoration: underline;
}

.attachment_container {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.attachment_icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.approver_container {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.approver_avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  border: 1rpx solid #eee;
}

.cancel_btn {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 600rpx;
  height: 90rpx;
  background-color: #f5222d;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.cancel_btn:active {
  transform: translateX(-50%) scale(0.98);
  background-color: #cf1322;
}

.cancel_btn_text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
}
</style>